

<template>
  <div class="article">
    <!-- {{this.art}} -->
      <div style="width:1400px;height:320px;">


      <el-carousel :interval="2000" type="card" height="300px">
    <el-carousel-item v-for="item in carouselList" :key="item.key">
      <!-- <h3 class="img">{{ img }}</h3> -->
       <img :src="item.src">
    </el-carousel-item>
   </el-carousel>

  </div>

  <div style="height:40px;">
      <!-- {{category}} -->
    <div class="header">
    <el-button @click="show_dialog">新增</el-button>

    <el-button @click="show_dialog_news">实时资讯</el-button>

    <el-button @click="show_dialog_ball">新闻资讯</el-button>
       </div>

       <div style="float:right;width:280px;margin-bottom:30px;">
      <el-input v-model="obj.name" placeholder="请输入栏目标题"></el-input>
    </div>

</div>
    <!-- 文章列表 -->
    <div class="line"> 
    <el-table :data="category.data" style="width: 100%;color:gray;font-size:12px;">
      <el-table-column prop="no" label="序号" width="280" align="center"> </el-table-column>
      <el-table-column prop="name" label="栏目名称" width="280" align="center">
      </el-table-column>
      <el-table-column prop="description" label="栏目描述" width="280" align="center">
      </el-table-column>
      
      <el-table-column label="操作" align="center">
        <template v-slot="scope" class="caozuo">
          <el-button class="caozuo_1" @click="delete_article(scope.row.id)">删除</el-button>
                
          <el-button class="caozuo_2" @click="edit_article(scope.row)">修改</el-button>

          <!-- <el-button @click="delete_article1(scope.row.ids)">批量删除</el-button> -->
        </template>
      </el-table-column>
     
    </el-table>
     </div>
    <!-- 分页按钮 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="obj.pageSize"
      :current-page="obj.page"
      @current-change="change"
      :total="this.total">
    </el-pagination>
    <!-- 模态框 -->
    <div>

    </div>


    <div class="key"> 
    <el-dialog :title="title" :visible.sync="dialog_article" width="70%" >
      <!-- {{form_article}} -->
      <el-form :model="form_article" :rules='rules'  ref="ruleForm"  class="demo-ruleForm" style="height:300px;">
        <el-form-item label="序号"  prop="no" :label-width="formLabelWidth_article">
          <el-input v-model="form_article.no"></el-input>
          <!-- <el-input type="textarea" autosize v-model="form_article.no"></el-input> -->
        </el-form-item>
        <el-form-item label="栏目名称" prop="name" :label-width="formLabelWidth_article">
            <el-input v-model="form_article.name"></el-input>
            <!-- <el-input type="textarea"  autosize v-model="form_article.name"></el-input> -->
          <!-- <Tinymce v-model="form_article.content"></Tinymce> -->
        </el-form-item>
        <el-form-item  label="栏目描述" prop="description" :label-width="formLabelWidth_article">
          <!-- <el-input style="height:40px;" v-model="form_article.description"></el-input> -->
          <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 8}" v-model="form_article.description"></el-input>
        </el-form-item>
             
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="background-color:#e686a6;color:#fff;height:40px;width:80px;" @click="resetForm('ruleForm')">重置</el-button>
        <el-button style="background-color:#e686a6;color:#fff;height:40px;width:80px;" @click="dialog_article = false">取 消</el-button>
        <el-button type="primary" style="background-color:#e686a6;color:#fff;height:40px;width:80px;"  @click="save_article">确定</el-button>
      </div>
    </el-dialog>


     <el-dialog :title="title" :visible.sync="dialog_article_news" width="80%" >
     <el-table :data="this.art.list" style="width: 100%">
      <el-table-column prop="id" label="编号" width="120"></el-table-column>
      <el-table-column prop="title" label="文章标题" width="120"></el-table-column>
      <el-table-column prop="content" label="内容" width="720">

        <template v-slot="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>

      <el-table-column prop="publishTime" label="发布时间">
        <template v-slot="scope">
          <div>{{ scope.row.publishTime | dateFMT }}</div>
        </template>
      </el-table-column>
     </el-table>
          <div slot="footer" class="dialog-footer">
        <!-- <el-button style="background-color:#e686a6;color:#fff;height:40px;width:80px;" @click="dialog_article_news = false">取 消</el-button> -->
        <el-button  style="background-color:#e686a6;color:#fff;height:40px;width:80px;"  @click="dialog_article_news=false">确定</el-button>
      </div> 
     </el-dialog>
    </div>


     <div style="margin:0;padding:0;height:600px;width:1500px;position:relative;background-color:#fff;">
    <div id="content" style="height:400px;top:120px;left:15%;width:850px;position:absolute;"  v-loading="loading"
      element-loading-text="拼命加载中" 
      element-loading-spinner="el-icon-loading"
      element-loading-background="#FFA07A">
     </div>
     </div>

     <!-- <div style="margin:0;padding:0;height:600px;width:1500px;position:relative;background-color:#FFFACD;">
    <div id="ball" style="height:400px;top:120px;left:15%;width:850px;position:absolute;" >
     </div>
     </div> -->
     <!-- <div id="earth" style="height:460px;width:550px;margin-left:40px;float:right;"> -->
    
   
  </div>
</template>

<style scoped>
      .header .el-button{
          width:80px;
          height: 30px;
          background-color:#49bece;
          color: #fff;
          font-size: 13px;
          text-align: center;
          font-weight: bold;
         
      }
      .article .line .el-button{
          width: 60px;
          height: 30px;
          font-size: 13px;
          /* font-weight: bold; */
          color: rgb(245, 250, 250);
          background-color:#52b9a8;
          text-align: center;
          /* font-weight: bold; */
      }
</style>




<script>
// 导入qs
import qs from "qs";
// 导入moment
import moment from "moment";

import axios from 'axios';

import { mapActions, mapState} from "vuex";
// 导入组件
// import Tinymce from "../../components/Tinymce";

export default {

      mounted(){
        //  this.initEchart();
          this.initEchart();
         

           
          setTimeout(function(){
                console.log(2)
                },8000);
                
          setTimeout(function(){
                console.log(2)
                },5000);
    },


  data() {
      var checkNum = (rule, value, callback) =>{
       if (!value) {
          return callback(new Error('内容不能为空'));
        }
        setTimeout(() => {
          console.log(Number.isInteger(value));
          console.log(typeof value);
          if (!Number.isInteger(Number(value))){
            callback(new Error('请输入数字值'));
           }
        }, 0);
      };
    return {

           id:0,
           loading:true,

      ruleForm: {
          name: '',
          no:'',
          description:''
          
        },
       rules:{
          name: [
            { required: true, message: '请输入栏目名称', trigger: 'blur' },
            { min: 3, max:100, message: '请完整输入你的栏目名称', trigger: 'blur' }
          ],
           no: [
            { validator:checkNum, trigger: 'blur'},
           
          ],

  },
         carouselList: [
       {src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2050451701,1076125514&fm=26&gp=0.jpg"'},
      {src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=387551630,1625018741&fm=26&gp=0.jpg',},
       {src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2249135856,877271410&fm=26&gp=0.jpg', },
         {src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1102713188,683726502&fm=26&gp=0.jpg', },
           {src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=330216137,2322523162&fm=26&gp=0.jpg', },
           {src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1585878472,1213534845&fm=15&gp=0.jpg', }
       
    ],
      title: "新增分类",
      data: [],
      obj: {
        page: 1,
        pageSize:6
      },
     
      total:100,
      dialog_article: false,
      dialog_article_news: false,
      form_article: {},
      formLabelWidth_article: "120px",
    //   options: [],
    };
  },
      // 组件销毁  离开当前页面时
      destroyed(){
          clearInterval();
      },


  computed: {
    ...mapState('category', ['category','datalist','art']),
    // ...mapState('datalist',['datalist'])
  },


  created(){
    // this.page_query();
    this.findAll_category();
       this.page_query_article();

         this.id = setInterval(()=>{
            this.findData()
        },5000)

         this.initEchart();
         
        
  },
  // 监听器
  // 当监听的变量发生变化时，执行监听中的代码
  watch: {
    obj: {
      handler: function () {
        // this.page_query();
        // this.findAll_category();
        this.page_query_article()
      },
      deep: true,
    },
  },

 
  methods: {
    ...mapActions("category", [
      "Category",
      "article",
      "deleteById",
      "page_query_article",
      "saveOrUpdate",
      "page_query",
      "page_query_art"
    ]),

    show_dialog_ball(){
           this.$router.push({
          path: "/manager/article"
    })
    },
    // ...mapActions('category',['page_query']),
      // 查询数据
        findData(){
           this.page_query({page:2,pageSize:7}).then(()=>{
            //    绘制地图
            this.initEchart();
            // 数组   并映射=>
           let res1 = this.datalist.list.map((item)=>{
                console.log(item);
                return item.province;
            })
            let res2 = this.datalist.list.map((item)=>{
                console.log(item);
                return item.dead;
            })
            // 接收参数
        this.initEchart(res1,res2);
           })

        },
        // 初始化图表
        // 传参
        initEchart(res1,res2){
            // 销毁图表
            echarts.init(document.getElementById('content')).dispose();
              // 初始化图表
            var myChart = echarts.init(document.getElementById('content'));
     // 指定图表的配置项和数据
        var option = {
              title: {
                text: '国内部分省份确诊人数'
            },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: res1,
                    axisLabel:{
                     formatter(val){
                        //  将字符串转化为数组切割并换行
                         return val.split('').join('\n');

                     }
                 }
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data:  res2,
                  type: 'line',
                  areaStyle: {

                  }
              }],
              tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: 'green'
                }
            }
        }
          
        }

         // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
         
        },






    //重置按钮
    resetForm(formName){
        this.$refs[formName].resetFields();
      },


    // 修改按钮
    edit_article(val) {
      // 0. 修改模态框标题
      this.title = "修改分类名称";
      // 1. 弹出模态框
      this.dialog_article = true;
      // 2. 将当前行数据放入模态框
      this.form_article = JSON.parse(JSON.stringify(val));
    },


    // 查询所有栏目
    findAll_category(){
        this.Category();
    },
    // 显示模态框
    show_dialog() {
      // 0. 修改模态框标题
      this.title = "新增/更新分类";
      this.dialog_article = true;
    
    },
     // 显示模态框
    show_dialog_news() {
      // 0. 修改模态框标题
      this.title = "实时热点资讯";

      this.dialog_article_news = true;
    
    },

    // 保存栏目
    save_article() {
        this.saveOrUpdate(this.form_article).then(()=>{
            this.dialog_article = false;
            this.findAll_category();
            this.page_query();
            this.form_article = {};
        
        });
    },
    // page_query(){
    //       this.page_query_article(this.obj);
    // },
    // 页码改变
    change(page) {
        //回调参数
      this.obj.page = page;
    },   

     page_query_article() {
      this.page_query_art(this.obj);
      this.total = this.art.total
      // this.tableData =this.art.list;
      // console.log(this.total)
    },
    // 删除
     delete_article(id) {
         
        axios({
        url: 'http://39.102.37.84:8001//category/deleteById',
        method: 'get',
        params: { id }
      }).then(res => {
         this.findAll_category();
            this.page_query();
            this.form_article = {};
      })

        this.$alert('你确定要删除吗！', {
          confirmButtonText: '确定',
          confirmButtonText1: '取消',
          callback: action => {
            this.$message({
              type: 'info',
              message: `本接口表示: ${ '删除成功' }`

            });
          }
        });
  
     
  },
   
}
};
</script>




